<!--学分查询-->
<template lang="pug">
  kalix-master
    div.PersonalCenter
      div.bgc
        img(src="/static/PersonalCenter/u3696.jpg")
      div.personal
        div.personal-left
          div.HeadPortrait
            img(:src="userIcon")
          div.xinxi
            router-link(v-bind:to="{name:'PersonalCenter'}")
              p 个人信息
            router-link(v-bind:to="{name:'InQuire'}")
              p.information 学分查询
            router-link(v-bind:to="{name:'Collection'}")
              p 我的收藏
            router-link(v-bind:to="{name:'History'}")
              p 历史记录
            router-link(v-bind:to="{name:'CourseManagement'}")
              p 课程管理
            div(v-if="isTeacher")
              router-link(v-bind:to="{name:'LiveManagement'}")
                p 直播管理
        div.personal-right
          div.title
            span {{username}}
          div.center
            div.centerTop
              span.centerText 您当前学习了共{{tableData.length}}门课程,共获得学分{{maxCredits}}分
            div.ulTitle
              template.eltemplate
                el-table(:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                stripe
                style="width: 100%"
                :default-sort = "{prop: 'date', order: 'descending'}"
                ).el-table
                  el-table-column(prop="date" label="序号" width="121")
                    template(slot-scope="scope")
                      div(style="text-align: center") {{ scope.$index + 1 }}
                  el-table-column(prop="name" label="课程名称" width="121")
                  el-table-column(prop="classHour" label="课时" width="121")
                  el-table-column(prop="credit" label="学分" width="121")
                  el-table-column(prop="uname" label="授课教师" width="121")
                  el-table-column(prop="gname" label="课程类别" width="121")
                  el-table-column(prop="credits" label="已得学分" width="121")
            div.paging
              el-pagination(
              @current-change="current_change"
              layout="prev, pager, next"
              :total="total")

</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        isTeacher: false,
        uid: '',
        username: '',
        userIcon: '',
        date: 0,
        total: 100, // 默认数据总数
        pagesize: 6, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        userList: [],
        tableData: [],
        maxCredit: ''
      }
    },
    computed: {
      maxCredits: function () {
        let sun = 0
        this.tableData.forEach(item => {
          sun += item.credits * 1
        })
        return sun
      }
    },
    mounted() {
      this.uid = this.$KalixCatch.get('id')
      this.username = this.$KalixCatch.get('user_name')
      this.getHeadImg(this.uid)
      this.getCreDits()
      this.getRid()
    },
    methods: {
      getRid() {
        this.axios.get('/camel/rest/roles', {
          params: {
            jsonStr: {'name': '教师'}
          }
        }).then(res => {
          if (res.data.totalCount > 0) {
            this.getRole(res.data.data[0].id)
          }
        })
      },
      getRole(rid) {
        this.axios.get('/camel/rest/roles/' + rid + '/users/ids', {
          params: {
            id: rid
          }
        }).then(res => {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i] === parseInt(this.uid)) {
              this.isTeacher = true
            }
          }
        })
      },
      current_change: function (currentPage) {
        this.currentPage = currentPage
      },
      getHeadImg(id) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/' + `${id}`
        }).then(res => {
          this.userIcon = res.data.data[0].icon
        })
      },
      getCreDits() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/getCreditByUser',
          params: {
            id: this.uid
          }
        }).then(res => {
          this.tableData = res.data.data
          this.total = this.tableData.length / this.pagesize * 10
        })
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .bgc
    width 100%
    height 327px
    position absolute
    top 100px
    z-index -1

  .bgc img
    width 100%
    height 100%

  .personal
    width 1200px
    height 718px
    /*background-color: green*/
    background-color: #fff
    margin 0 auto
    margin-top 186px
    position relative
    border-radius 5px
    box-shadow 5px 5px 10px #ccc

  .personal-left
    width 18%
    height 100%
    float left
    position: relative

  .personal-right
    width 80%
    height 100%
    float right

  /*头像*/
  .HeadPortrait
    width 150px
    height 150px
    position: absolute
    right 0
    top -75px

  .HeadPortrait img
    width 100%
    height 100%

  .xinxi
    position absolute
    top 110px
    right 0
    width 150px
    /*height 300px*/
    border 1px solid #ccc
    border-radius 5px
    overflow hidden

  .xinxi p
    display block
    width 150px
    height 50px
    text-align center
    line-height 50px
    color #999
    box-sizing border-box
    border-top 1px solid #ccc

  .xinxi .information
    background-color #008F95
    color #fff
    font-weight 700
    border-top none

  /*右侧*/
  .title
    margin-top 36px

  .title span
    font-size 20px
    margin-right 14px
    color #000
    font-weight 700

  .center
    width 905px
    height 520px
    border 1px solid #ccc
    border-radius 5px
    margin-top 54px
    position relative

  .centerBox
    width 200px
    height 250px
    padding-left 26px

  .centerP
    display inline-block
    text-align right
    width 110px
    height 36px
    line-height 36px
    font-size 18px

  .centers
    width 25px
    margin-left 16px
    text-algin left

  .centerTop
    margin 20px 30px 10px 26px

  .centerText
    color #008F95
    display inline-block

  .centerInp
    width 350px
    height 30px
    border 2px solid #ccc
    display inline-block
    margin-left 130px
    border-radius 5px
    position relative
    line-height 30px

  .centerInp input
    width 285px
    height 18px
    margin-left 16px
    border none
    outline none

  .centerInp img
    position absolute
    top 5px
    right 20px

  .ulTitle
    margin-left 26px

  .paging
    position absolute
    left 50%
    bottom 10px
    margin-left -182px

</style>
<style lang="stylus" rel="stylesheet/stylus">
  .ulTitle .el-table td, .el-table th.is-leaf
    text-align center
</style>
